<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card>
        <!-- 左右布局 -->
        <TreeTools :node-data="companyInfo" />
        <!-- 测试树形组件
          树形控件 :data是提供数据的 数据默认的格式 label(数据展示) + children 父子关联关系
          如果展示的字段不是name,父子关联关系也不是children, 需要定义 props属性
          props 值是一个配置对象 :props ="{label: 'xxx', children: 'xxx'}"
          default-expand-all展开所有叶子节点
        -->
        <el-tree :data="departs" :props="{label: 'name'}" default-expand-all>
          <!-- data就是当前作用域插槽上绑定的每一行的数据 -->
          <template #default="{data}">
            <TreeTools :node-data="data" />
          </template>
        </el-tree>
      </el-card>
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { reqGetDepartments } from '@/api/departments'
export default {
  name: 'Departments',
  components: { TreeTools },
  data() {
    return {
      departs: [], // 部门列表
      companyInfo: {
        name: '传智教育',
        manager: '负责人',
        isRoot: true
      }
    }
  },
  created() {
    this.getDepts()
  },
  methods: {
    // 获取组织架构部门列表
    async getDepts() {
      const { data: { depts }} = await reqGetDepartments()
      this.departs = this.translateDepts(depts)
      this.translateTwo(this.departs, depts)
    },
    // 一级部门
    translateDepts(depts) {
      // console.log(depts)
      //  一级部门的pid是 ''
      return depts.filter(item => {
        if (item.pid === '') {
          item.children = []
        }
        return item.pid === ''
      })
    },
    // 二级部门
    translateTwo(topList, depts) {
      console.log(topList, depts)
      // 将一级部门的子部门添加到一级部门的children中
      topList.forEach(item => { // 遍历所有的一级部门
        depts.forEach(subItem => { // 遍历所有的部门
          if (subItem.pid === item.id) { // 如果部门的pid===一级部门的id
            item.children.push(subItem) // 将这个部门追加到一级部门的children中
          }
        })
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 50px;
}
</style>
